<template>
  <div>
    <TabsView />
    <span style="font-size: 25px; font-weight: bold; color: #f51"
      >未维修列表</span
    >
    <el-divider></el-divider>&nbsp;
    <el-button
      type="primary"
      @click="(dialogFormVisible = true), (flag = 0)"
      plain
      >添加未维修</el-button
    >
    <el-table
      :data="
        tableData
          ? tableData.slice(
              (currentPage - 1) * pagesize,
              currentPage * pagesize
            )
          : []
      "
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="ID" sortable width="80">
        <template slot-scope="scope"
          ><el-tag>{{ scope.row.id }}</el-tag></template
        >
      </el-table-column>
      <el-table-column prop="createTime" label="提交时间"> </el-table-column>
      <el-table-column prop="ownName" label="房主姓名"> </el-table-column>
      <el-table-column prop="houseNum" label="房屋编号"> </el-table-column>
      <el-table-column prop="repairStatus" label="维修状况">
        <template slot-scope="scope"
          ><el-tag :type="scope.row.repairStatus == 1 ? 'danger' : 'success'">{{
            scope.row.repairStatus == 1 ? "未维修" : "已维修"
          }}</el-tag></template
        >
      </el-table-column>
      <el-table-column prop="repairMsg" label="维修内容"> </el-table-column>
      <el-table-column prop="ownPhone" label="联系电话"> </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <!-- 这是修改未维修数据的按钮 -->
          <el-button
            type="primary"
            size="small"
            @click="handleEdit(scope.row)"
            plain
            >修改</el-button
          >
          <!-- 这是删除未完成的维修按钮 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
            @click="handleClick(scope.row)"
            plain
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="this.flag == 0 ? '添加未维修情况信息' : '编辑未维修信息'"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form" class="ddy">
        <el-form-item label="ID" :label-width="formLabelWidth">
          <el-input v-model="form.id" autocomplete="off" class="srk"></el-input>
        </el-form-item>
        <el-form-item label="提交时间" :label-width="formLabelWidth">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.createTime"
              class="srk"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <!-- <el-form-item label="房主姓名" :label-width="formLabelWidth">
          <el-input
            v-model="form.ownName"
            autocomplete="off"
            class="srk"
            validate-event
          >{{form.ownName}}</el-input> -->
        <!-- </el-form-item> -->
        <el-form-item label="房屋编号" :label-width="formLabelWidth">
          <el-select
            v-model="form.houseId"
            placeholder="请选择房屋id"
            class="srk"
          >
            <el-option
              :label="v.id"
              :value="v.id"
              v-for="v in houseId"
              :key="v.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房屋楼号" :label-width="formLabelWidth">
          <el-select
            v-model="form.houseNum"
            placeholder="请选择房屋楼号"
            class="srk"
          >
            <el-option
              :label="v.houseNum"
              :value="v.houseNum"
              v-for="v in house"
              :key="v.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维修状况" :label-width="formLabelWidth">
          <el-select
            v-model="form.repairStatus"
            placeholder="请选择维修状况"
            class="srk"
          >
            <el-option label="已维修" value="0"></el-option>
            <el-option label="未维修" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维修内容" :label-width="formLabelWidth">
          <el-input v-model="form.repairMsg" autocomplete="off" class="srk">{{
            form.repairMsg
          }}</el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="form.ownPhone" autocomplete="off" class="srk">{{
            form.ownPhone
          }}</el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="fun()">确 定</el-button>
      </div>
    </el-dialog>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[4, 6, 8, 12]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
</template>

<script>
import {
  nowei,
  addnowei,
  edit,
  // addweixiu,
  finshnowei,
  getHouse,
} from "../../apis/pm/link.js";
import TabsView from "./TabsView.vue";

export default {
  components: { TabsView },
  mounted() {
    nowei().then((ok) => {
      console.log(ok);
      // this.tableData=ok.data.data
      console.log(this.tableData);
      ok.data.data.forEach((item) => {
        if (item.repairStatus == 1) {
          this.tableData.push(item);
        }
      });
    });
    // 获取房屋id
    getHouse().then((ok) => {
      console.log(ok);
      this.house = ok.data.data;
      // console.log(ok.data.data.id)
      this.houseId = ok.data.data;
    });
  },

  data() {
    return {
      // 未维修列表
      tableData: [],
      tableData2: [],
      arr: "",
      flag: 1,
      // 默认显示第几页
      currentPage: 1,
      pagesize: 6,
      house: "",
      houseId: "",
      // 对话框
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        id: "",
        createTime: "",
        houseId: "",
        houseNum: "",
        ownName: "",
        ownPhone: "",
        repairMsg: "",
        repairStatus: "",
      },
      formLabelWidth: "80px",
    };
  },
  methods: {
    // 每页显示的条数
    handleSizeChange(pagesize) {
      this.pagesize = pagesize;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    // 添加未维修信息
    fun() {
      this.dialogFormVisible = false;
      if (this.flag == 0) {
        addnowei(
          this.form.createTime,
          this.form.houseId,
          this.form.ownPhone,
          this.form.repairMsg,
          this.form.repairStatus
        ).then((ok) => {
          console.log(ok);
          nowei().then((ok) => {
            console.log(ok.data.data);
            // this.tableData=ok.data.data
            ok.data.data.forEach((item) => {
              if (item.repairStatus == 1) {
                for (var i = 0; i < item.length; i++) {
                  if (item.indexOf(ok.data.data[i]) == -1) {
                    this.tableData.push(item);
                  }
                }
                // 上面是数组去重
              }
            });
          });
        });
      } else {
        edit(
          this.form.createTime,
          this.form.houseId,
          this.form.id,
          this.form.ownPhone,
          this.form.repairMsg,
          this.form.repairStatus
        ).then((ok) => {
          console.log(ok);
          nowei().then((ok) => {
            console.log(ok.data);
            // this.tableData = ok.data.data;
            ok.data.data.forEach((item) => {
              if (item.repairStatus == 1) {
                for (var i = 0; i < item.length; i++) {
                  if (item.indexOf(ok.data.data[i]) == -1) {
                    this.tableData.push(item);
                  }
                }
              }
            });
          });
        });
        // })
      }
    },
    // 删除 未维修信息
    handleClick(row) {
      // console.log(row.id);
      finshnowei(row.id).then((ok) => {
        console.log(ok);
        console.log(row.id);
        nowei().then((ok) => {
          ok.data.data.forEach((item) => {
            if (item.repairStatus == 1) {
              for (var i = 0; i < item.length; i++) {
                  if (item.indexOf(ok.data.data[i]) == -1) {
                    this.tableData.push(item);
                  }
                }
                //上面是数组去重
            }
          });
        });
      });
    },
    // 这是添加未维修信息的
    // open() {
    //   this.$confirm(
    //     "检测到未保存的内容，是否在离开页面前保存修改？",
    //     "确认信息",
    //     {
    //       distinguishCancelAndClose: true,
    //       confirmButtonText: "添加",
    //       cancelButtonText: "取消",
    //     }
    //   )
    //     .then(() => {
    //       this.$message({
    //         type: "success",
    //         message: "添加成功",
    //       });
    //     })
    //     .catch((action) => {
    //       this.$message({
    //         type: "info",
    //         message:
    //           action === "cancel" ? "放弃保存并离开页面" : "停留在当前页面",
    //       });
    //     });
    // },

    //这是 修改未维修信息
    handleEdit(row) {
      this.flag = 1;
      (this.form.createTime = row.createTime),
        (this.form.houseId = row.houseId),
        (this.form.houseNum = row.houseNum),
        (this.form.id = row.id),
        (this.form.ownName = row.ownName),
        (this.form.ownPhone = row.ownPhone),
        (this.form.repairMsg = row.repairMsg),
        (this.form.repairStatus = row.repairStatus);
      this.dialogFormVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.ddy {
  display: flex;
  flex-wrap: wrap;
  .srk {
    width: 260px;
    height: 20px;
  }
}
</style>
